import { getQuestionStatListApi } from '@/apis/stat';
import styles from './statList.module.scss';
import { Table } from 'antd';
import { useEffect, useState } from 'react';
import { useRequest } from 'ahooks';
import type { questionComponentType } from '@/utils/type';





type propsType = {
  component:questionComponentType
  componentList:questionComponentType[]
  setSelectedId:(selectedId:string)=>void
  selectedId:string,
  list:any[]
}

export default function StatList(props:propsType) {
  const {selectedId,componentList,setSelectedId,list} = props
  const [L,setL] = useState<any[]>([])
  const {data={}} = useRequest(getQuestionStatListApi)

  const columns = componentList.map((item:questionComponentType)=>{
    const mainTitle = item.props!.title || item.title
    return {
      title:(
        <div   onClick={()=>setSelectedId(item.fe_id)} style={{cursor:'pointer'}}>
          <span style={{color:item.fe_id === selectedId ?'#1890ff':''}}>{mainTitle}</span>
        </div>
      ),
      dataIndex:item.fe_id
    }
  })

  useEffect(()=>{
    setL(list)
  },[data,list])


  return (
    <div className={styles.container}>
      <div className={styles.title}>答卷数量：{list?.length}</div>
      <div className={styles['list-container']}>
        <div className={styles.list}>
        <Table columns={columns} dataSource={L} />
        </div>
      </div>
    </div>
  )
}
